<template>
  <div class="business-box-wrap">
    <ul class="menu clearBoth">
      <li class="menu-item" :class="[active === 1 ? 'menu-item-active' : '']" @click.stop="businessTypeChange(1)">{{$t('configLazyLoad.businessConfig.businessInstructions')}}</li>
      <li class="menu-item add-color" @click="addFlow"><i class="el-icon-plus add-flow-color"></i>&nbsp;{{$t('configLazyLoad.businessConfig.addBusiness')}}</li>
      <li v-for="one in businessList" class="menu-item"
          :class="[ one.status === 'disable' ? 'disable' : '', active === one._id ? 'menu-item-active' : '']"
          @click.stop="businessTypeChange(one._id)">
        {{one.name}}
      </li>
    </ul>
    <div class="BusinessDescription" v-if="active === 1" >
      <!--不是oem && 不是session跳转不展示配置申请-->
      <div v-if="!$store.state.oemObj.oemFlag && $store.state.session.user.type !== 'admin'">
        <affix :label="$t('config.business.businessIntro')">
          {{$t('configLazyLoad.businessConfig.applicationBusinessTips1')}}
        </affix>
        <affix :label="$t('configLazyLoad.businessConfig.applicationConfigurationBusiness')">
          <div v-if="configBusiness">
            <el-row :gutter="20">
              <!--<el-col :span="8">-->
              <!--<b-input v-on:tellme="submit" label="公司名称" :default="''" :id="'公司名称'" require="required" :random="random"></b-input>-->
              <!--</el-col>-->
              <el-col :span="8">
                <b-input v-on:tellme="submit" :label="$t('business.linker')" :default="''" :id="'联系人'" require="required" :random="random"></b-input>
              </el-col>
              <el-col :span="8">
                <b-input v-on:tellme="submit" :label="$t('business.linkerPhone')" :default="''" :id="'联系电话'" require="required" :random="random"></b-input>
              </el-col>
              <el-col :span="8">
                <b-input v-on:tellme="submit" :label="$t('public.email')" :default="''" :id="'邮箱'" require="no" :random="random"></b-input>
              </el-col>
            </el-row>
            <el-row :gutter="20">
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <b-file v-on:tellme="submit" :label="$t('configLazyLoad.businessConfig.businessConfigurationDescription')" :id="'工单配置说明'" require="no" :random="random" :default="[]" @showBigImg="showBigImg"></b-file>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <b-textarea v-on:tellme="submit" :label="$t('public.remark')" :default="''" :id="'备注'" require="no" :random="random"></b-textarea>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-button class="primary_btn fr" type="primary" @click="save">{{$t('configLazyLoad.businessConfig.submit')}}</el-button>
              </el-col>
            </el-row>
          </div>
          <div v-else class="complete">
            <p><i class="iconfont icon-tijiaochenggong"></i></p>
            <p class="tip">{{$t('configLazyLoad.businessConfig.applicationBusinessTips2')}}</p>
          </div>
        </affix>
      </div>
      <div>
        <affix :label="$t('config.business.businessIntro')" v-if="$store.state.oemObj.oemFlag && $store.state.session.user.type === 'admin'">
          {{$t('configLazyLoad.businessConfig.businessTips', {name: $store.state.oemObj.oemFlag ? '' : $t('configLazyLoad.businessConfig.7moor')})}}
        </affix>
        <affix :label="$t('config.business.businseeApplyTemplate')">
          <p class="font14">
            {{$t('configLazyLoad.businessConfig.templateTips1')}}<span v-show="!$store.state.oemObj.oemFlag">{{$t('configLazyLoad.businessConfig.templateTips2')}}</span><span v-show="$store.state.oemObj.oemFlag">{{$t('configLazyLoad.businessConfig.templateTips3')}}</span>
            {{$t('configLazyLoad.businessConfig.templateTips4')}}
          </p>
          <p class="font14">
            <span style="font-size: 18px;color: #3f5997;">{{$t('configLazyLoad.businessConfig.forExample')}}</span><span style="color: #3f5997;">（{{$t('configLazyLoad.businessConfig.takeTheBusiness')}}）：</span>
          <p>
          <div class="business-flow-example">
            <span class="copyText" @click="copyText"><i class="iconfont icon-fuzhi add-flow-color"></i>&nbsp;{{$t('configLazyLoad.businessConfig.copyText')}}</span>
            <ul class="business-flow-example-ul" id="business-flow-example-ul">
              <li class="first">
                <span class="font16">{{$t('configLazyLoad.businessConfig.temp1')}}</span>
                <ul class="second disclist"><li>{{$t('configLazyLoad.businessConfig.temp1Content')}}</li></ul>
              </li>
              <li class="first">
                <span class="font16">{{$t('configLazyLoad.businessConfig.temp2')}}</span>
                <ul class="second disclist">
                  <li>{{$t('configLazyLoad.businessConfig.temp2Content')}}</li>
                  <li>{{$t('configLazyLoad.businessConfig.theProcessContainsFields')}}
                    <ul class="circlelist">
                      <li>{{$t('configLazyLoad.businessConfig.fields1')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.fields2')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.fields3')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.fields4')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.fields5')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.fields6')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.fields7')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.fields8')}}</li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li>
                <span class="font16">{{$t('configLazyLoad.businessConfig.temp3')}}</span>
                <ul>
                  <li>{{$t('configLazyLoad.businessConfig.temp3By1')}}
                    <ul class="disclist">
                      <li>{{$t('configLazyLoad.businessConfig.temp3By1Content1')}}
                        <ul class="circlelist">
                          <li>{{$t('configLazyLoad.businessConfig.fields1')}}</li>
                          <li>{{$t('configLazyLoad.businessConfig.fields2')}}</li>
                          <li>{{$t('configLazyLoad.businessConfig.fields3')}}</li>
                          <li>{{$t('configLazyLoad.businessConfig.fields4')}}</li>
                          <li>{{$t('configLazyLoad.businessConfig.fields5')}}</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li>{{$t('configLazyLoad.businessConfig.temp3By2')}}
                    <ul class="disclist">
                      <li>{{$t('configLazyLoad.businessConfig.temp3By2Content2')}}
                        <ul class="circlelist">
                          <li>{{$t('configLazyLoad.businessConfig.temp3By2Content2Fields')}}</li>
                        </ul>
                      </li>
                      <li>{{$t('configLazyLoad.businessConfig.temp3By2Content2Results')}}
                        <ul class="circlelist">
                          <li>{{$t('configLazyLoad.businessConfig.fields8')}}</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li>{{$t('configLazyLoad.businessConfig.temp3By3')}}
                    <ul class="disclist">
                      <li>{{$t('configLazyLoad.businessConfig.temp3By3Content')}}</li>
                      <li>{{$t('configLazyLoad.businessConfig.temp3By3ContentFields')}}
                        <ul class="circlelist">
                          <li>{{$t('configLazyLoad.businessConfig.fields9')}}</li>
                        </ul>
                      </li>
                      <li>{{$t('configLazyLoad.businessConfig.temp3By3Results')}}
                        <ul class="circlelist">
                          <li>{{$t('configLazyLoad.businessConfig.fields9')}}</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </affix>
        <affix :label="$t('config.business.configFlow')">
          <div class="configFlow">
            <p class="font16">{{$t('configLazyLoad.businessConfig.accordingToProcessInformation')}}<span :class="{oem_7moor:$store.state.oemObj.oemFlag}">{{$t('configLazyLoad.businessConfig.7moor')}}</span>{{$t('configLazyLoad.businessConfig.staffHelp')}}</p>
            <p><span :class="{oem_7moor:$store.state.oemObj.oemFlag}">{{$t('configLazyLoad.businessConfig.7moor')}}</span>{{$t('configLazyLoad.businessConfig.threeStaffHelp')}}</p>
            <ul>
              <li>{{$t('configLazyLoad.businessConfig.process1')}}</li>
              <li>{{$t('configLazyLoad.businessConfig.process2')}}</li>
              <li>{{$t('configLazyLoad.businessConfig.process3')}}</li>
            </ul>
            <div style="width: 100%;text-align: center">
              <img src="../../../../assets/img/flowchart.png">
            </div>
          </div>
        </affix>
        <affix :label="$t('config.business.businessOperateFlow')">
          <div class="business-flow-opreate">
            <p class="font16">{{$t('configLazyLoad.businessConfig.processShows')}}</p>
            <p>{{$t('configLazyLoad.businessConfig.processTemple')}}</p>
            <p>{{$t('configLazyLoad.businessConfig.processTemple1')}}</p>
            <div style="width: 100%;text-align: center">
              <img src="../../../../assets/img/flowstep1.jpg">
            </div>
            <p>{{$t('configLazyLoad.businessConfig.processTemple2')}}</p>
            <div style="width: 100%;text-align: center">
              <img src="../../../../assets/img/flowstep2.jpg">
            </div>
            <p>{{$t('configLazyLoad.businessConfig.processTemple3')}}</p>
            <div style="width: 100%;text-align: center">
              <img src="../../../../assets/img/flowstep3.jpg">
            </div>
            <p>{{$t('configLazyLoad.businessConfig.processTemple4')}}</p>
            <div style="width: 100%;text-align: center">
              <img src="../../../../assets/img/flowstep4.jpg">
            </div>
          </div>
        </affix>
      </div>
    </div>
    <div v-if="active !== 1">
      <div class="flow-chart-title">
        <span class="h1 font16">{{$t('configLazyLoad.businessConfig.businessFlowStep')}}</span>
        <span class="font14 tipcolor">{{$t('configLazyLoad.businessConfig.remarkLeft')}}<span class="flowicons"></span>{{$t('configLazyLoad.businessConfig.remarkRight')}}</span>
        <!--<span class="pull-right font14 cursor-pointer" @click="modifyFlowTip = true"><i class="iconfont icon-beizhu add-flow-color"></i>&nbsp;修改工单流程</span>-->
      </div>
      <business-flow-chat :flowId="active"></business-flow-chat>
    </div>
    <el-dialog :close-on-click-modal="false" :title="$t('config.business.addFlowTips')" :visible.sync="addFlowTip" width="30%">
      <div class="add-flow-dialog-body">
        <div>
          <p class="font16 padding-tb" v-if="$store.state.oemObj.oemFlag">
            {{$t('configLazyLoad.businessConfig.flowTips1')}}
          </p>
          <p class="font16 padding-tb" v-else>
            {{$t('configLazyLoad.businessConfig.flowTips2')}}
          </p>
        </div>
        <div slot="footer" class="footer">
          <el-button type="primary" class="primary_btn" @click="addFlowTip = false">{{$t('configLazyLoad.businessConfig.sureBtn')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="$t('config.business.modifyFlowTips')" :visible.sync="modifyFlowTip" width="30%">
      <div class="add-flow-dialog-body">
          <p class="tipcolor font16">
            {{$t('configLazyLoad.businessConfig.notice')}}：
          </p>
          <p class="tipcolor font16">
            {{$t('configLazyLoad.businessConfig.helpText1')}}<span v-if="!$store.state.oemObj.oemFlag">{{$t('configLazyLoad.businessConfig.helpText2')}}</span><span v-show="$store.state.oemObj.oemFlag">{{$t('configLazyLoad.businessConfig.helpText3')}}</span>
          </p>
          <p class="font16 padding-tb">
            <span :class="{oem_7moor:$store.state.oemObj.oemFlag}">{{$t('configLazyLoad.businessConfig.7moor')}}</span>{{$t('configLazyLoad.businessConfig.helpText4')}}
          </p>
        <div slot="footer" class="footer">
          <el-button type="primary" class="primary_btn" @click="modifyFlowTip = false">{{$t('configLazyLoad.businessConfig.sureBtn')}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Clipboard from 'clipboard-js'
  import businessFlowChat from './BusinessFlowChat.vue'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import BInput from '@/components/public-modules/cust-tab-content/business/base/Binput.vue'
  import BTextarea from '@/components/public-modules/cust-tab-content/business/base/Btextarea.vue'
  import BNumber from '@/components/public-modules/cust-tab-content/business/base/Bnumber.vue'
  import BFile from '@/components/public-modules/cust-tab-content/business/base/Bfile.vue'
  import { commitImgType2 } from '@/utils/publicMethod.js'
  export default {
    name: 'BusinessConfig',
    data () {
      return {
        active: 1,
        businessList: [],
        addFlowTip: false,
        modifyFlowTip: false,
        random: 0,
        submitNum: 0,
        configBusiness: true,
        form: {
          accountName: this.$store.state.session.account.name,
          companyName: this.$store.state.session.account.companyName,
          type: 'business',
          accountId: this.$store.state.session.account.account,
          fields: []
        }
      }
    },
    computed: {
      lisenceVersion () {
        return this.$store.state.session.user.uversion
      }
    },
    provide: function () {
      return {
        busType: 'oldFlow'
      }
    },
    methods: {
      showBigImg (data) {
        // 获取所有包含imgA的图片
        let _array = this.$el.querySelectorAll('.BusinessDescription .imgA')
        commitImgType2(data, _array)
      },
      copyText () {
        let self = this
        Clipboard.copy(document.getElementsByClassName('business-flow-example-ul')[0].innerText).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      businessTypeChange (id) {
        this.active = id
        if (id === 1) {
          this.configBusiness = true
        }
      },
      submit (obj) {
        let name = Object.keys(obj)[0]
        let value = obj[name]
        if (value === false) {
          return
        }
        this.submitNum++
        this.form.fields.push({name, value})
        if (this.submitNum === 5) {
          this.form.fields.push({name: this.$t('configLazyLoad.businessConfig.accountName'), value: this.form.accountName})
          this.form.fields.push({name: this.$t('configLazyLoad.businessConfig.companyName'), value: this.form.companyName})
          this.$store.dispatch('submitBusinessFlowApply', this.form).then((res) => {
            if (res.success) {
              this.configBusiness = false
            }
          })
        }
      },
      save () {
        this.random = Math.random()
        this.submitNum = 0
        this.form.fields = []
      },
      addFlow () {
        this.addFlowTip = true
      }
    },
    beforeMount () {
      this.$store.dispatch('queryAccountBusinessFlow', {}).then((res) => {
        this.businessList = res.data
      })
    },
    components: {
      businessFlowChat,
      affix,
      BInput,
      BTextarea,
      BNumber,
      BFile
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .color-prom
    color $c-prompt
  .business-box-wrap
    margin-top 1px
  .menu
    background #fff
    height 50px
    width calc(100vw - 56px)
    position absolute
    z-index 9
    border-bottom 1px solid #d9d9d9
    white-space nowrap
    overflow hidden
    font-size 14px
    white-space nowrap
    color $cf-gray1
    background #fff
    &:hover
      min-height 50px
      height auto
  li
    display inline-block
    &:first-child
      margin-left 16px
  .menu-item
    float left
    margin-top 10px
    padding 0 15px
    height 30px
    line-height 30px
    margin-left 6px
    cursor pointer
  .add-color
    color $c-main
    border-right solid 1px $c-border2
  .add-flow-color
    color $c-main
    margin-bottom 10px
  .menu-item-active
    background $c-main
    color #fff
    border-radius 14px
  .disable
    color $c-pink
  .disable.menu-item-active
    background $c-pink
    color #fff
  .cursor-pointer
    cursor pointer
  .pull-right
    float right
  .tipcolor
    color #3f5997
    .flowicons
      display: inline-block;
      width: 26px;
      height: 16px;
      margin: 0 7px;
      border: 1px solid;
      border-radius: 16%;
      vertical-align: sub;
  .add-flow-dialog-body
    .padding-tb
      padding 10px 0
    .footer
      text-align center
      padding 5px 0
  .flow-chart-title
    padding 70px 25px 10px
    .h1
      font-weight 600
  .BusinessDescription
    height calc(100vh - 141px)
    padding 70px 20px 20px
    background #fff
    overflow scroll
    font-size 14px
    p
      padding 10px 0
    ul
      padding 20px 30px
    ul ul
      padding 10px 0 10px 40px
    li
      display list-item
      margin:0
    .squarelist li
      list-style-type square !important
    .disclist li
      list-style-type disc !important
    .circlelist li
      list-style-type circle !important
    .business-flow-example
      position relative
      margin: 0 auto
      width: 70%
      background: #f5f5f5
      .copyText
        position absolute
        right 20px
        top 15px
        cursor pointer
      li
        padding 5px 0
    .configFlow
      img
        /*width 90%*/
        margin 15px 0
    .business-flow-opreate
      div
        width 100%
        text-align center
      img
        width auto
        max-width 100%
        box-shadow 0 0 3px black
        border-radius 3px
  .complete
    padding-top 20px
    text-align center
    .icon-tijiaochenggong
      color $c-main
      font-size 50px
    .tip
      padding-top 20px
</style>
